<script setup lang="ts">
// 轮播图数据
const banners = [
  {
    id: 3,
    image: '/banners/home/05.png',
    title: '三网合一的高质量短信通道',
    description: '三大运营商直接提供的短信端口与客户需求精准连接',
    link: '/products/notify-sms'
  },
  {
    id: 4,
    image: '/banners/home/03.png',
    title: '超大并发，极速触达',
    description: '直连运营商网关通道，支持超大并发量，短信快速送达，稳定可靠有保障',
    link: '/products/notify-sms'
  },
  {
    id: 5,
    image: '/banners/home/04.png',
    title: '短信精准触达，赋能转化增长',
    description: '高送达率短信营销方案，直击用户需求，助力业务高效转化',
    link: '/products/notify-sms'
  },
  {
    id: 1,
    image: '/banners/home/01.png',
    title: '智驭数据，云启未来',
    description: '专业服务，一站式解决 —— IDC，让您的IT运维更轻松！',
    link: '/products/idc'
  },
  {
    id: 2,
    image: '/banners/home/02.png',
    title: '互联网基础设施服务提供商',
    description: '向客户提供业界领先的网络电信增值业务经营服务。',
    link: '/about'
  },
]
</script>

<template>
  <UCarousel
    :items="banners"
    :ui="{ 
      item: 'basis-full shrink-0 grow-0 ps-0',
      container: 'flex-row ms-0',
      dots: 'absolute bottom-4 sm:bottom-6 md:bottom-8 inset-x-0 flex items-center justify-center gap-2 md:gap-3 z-10',
      dot: 'cursor-pointer rounded-full transition-all duration-300 bg-white/50 hover:bg-white/70 data-[state=active]:bg-white data-[state=active]:w-8 md:data-[state=active]:w-10 size-2 data-[state=active]:h-2'
    }"
    class="w-full overflow-hidden h-50 md:h-187.5"
    dots 
    autoplay
  >
    <template #default="{ item }">
      <div class="relative w-full h-50 md:h-187.5">
        <!-- 背景图片 -->
        <NuxtImg
          :src="item.image"
          :alt="item.title"
          class="w-full h-full object-cover"
          loading="lazy"
          format="webp"
        />
        
        <!-- 文字内容 -->
        <div class="absolute inset-0 flex items-center">
          <UContainer>
            <div class="w-[55vw] max-w-2xl text-gray-900 space-y-2 md:space-y-4 lg:space-y-6 px-4">
              <h1 class="text-[1.2rem] md:text-4xl lg:text-5xl font-bold leading-tight">
                {{ item.title }}
              </h1>
              <p 
                v-if="item.description" 
                class="text-[0.7rem] md:text-lg lg:text-xl text-gray-800"
              >
                {{ item.description }}
              </p>
            </div>
          </UContainer>
        </div>
      </div>
    </template>
  </UCarousel>
</template>